<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios的实例和模块封装</title>
	</head>
	<body>
		<!-- 在main.js中
		 1.创建axios对应的实例
		const instancel = axios.create({
			baseURL:'http://123.207.32.32:8000',
			timeout:5000
		})
		instancel({
			url:'/home/multidata'
		}).then(res => {
			console.log(res);
		})
		 instancel({
			 url:'/home/data',
			 params:{
				 type:'pop',
				 page:1
			 }
		 }).then(res => {
			 console.lgo(res);
		 })
		 2.我们可以在组件中请求数据展示
			第一步先导入import axios from 'axios'
			第二步
			<h2>{{categories}} </h2>
			data() {
				reture {
					categories:''
				}
			}
			created(){
				axios({
					url:'http://123.207.32.32:8000/category'
				}).then(res => {
					this.categories = res ;
				})
			}
			3.在另外一个组件中使用另外一个组件中的数据
				第一步先导入组件
				import HellWorld form './components/HellWorld'
				第二步注册组件
				components:{
					HelloWorld
				}
				
				第三步使用组件
				<hello-world/>
			4.虽然上面的方法可以请求数据展示  但是不建议这样做 所以我们要进行封装
				第一步新建一个文件夹 network
				第二步新建一个文件request.js
				import axios from 'axios'
				export function requesst(config){
					//创建实例
					const instance = axios.create({
						baseURL:'http:///123.207.32.32:8000',
						timeout:5000
					})
					//发送网络请求
					instance(config).then(res = > {
						console.log(res);
						success(res);
					}).catch(err => {
						failure(err);
					})
					
				}
			5.封装request模块
				instance(config).then(res => {
					console.log(res)
				})
				import {request} from './network/request'
			6.最终使用的方法
			1.在request.js中
				import axios from 'axios'
				export function request(config){
					return new Promise((reslove,reject) => {
						//创建实例
						const instance = axios.create({
							baseURL:'http:///123.207.32.32:8000',
							timeout:5000
						})
						//发送网络请求
						instance(config).then(res = > {
							resolve(res)
						}).catch(err => {
							reject(err)
						})
						
					})
				}
				//也可以替换成下面的写法
				export function request(config) {
					//创建axios实例
					const instance = axios.create({
						baseURL:'http//123.207.32.32:8000',
						timeout:5000
					})
					//axios拦截器
					instalce.interceptors.request.use(
					res => {
						console.log(res); //拦截打印
						return res ;//我们要进行返回
						//
					},err => {
						console.log(err);
					})
					
					//响应拦截
					instance.interceptors.response.use(
					res => {
						console.log(res); //拦截打印
						return res ;//我们要进行返回
						//
					},err => {
						
						console.log(err);
					}))
					//发送网络请求
					return instance(config)
				}
			2.在main.js中使用封装好的request
			request({
				url:'/home/multidata'
				
			}).then(res => {
				console.log(res);
			}).catch(err => {
				console.log(err);
			})
		 -->
	</body>
</html>
